import React from "react";
import { Row, Col } from 'antd';
import { PageContainer } from '@ant-design/pro-components';
import TargetLog from "./TargetLog";
import useIntersectionObserver from "../../hooks/useIntersectionObserver";
import styles from './index.less';

const showIndex = Array.of(
  { title: '超越测试表格1', meter: 'a' },
  { title: '超越测试表格2', meter: 'b' },
  { title: '超越测试表格3', meter: 'c' },
  { title: '超越测试表格4', meter: 'd' },
  { title: '超越测试表格5', meter: 'e' },
)
const observeOptions = {
  root: null, // 相对与视口进行检查
  rooMargin: 0, // 根周围的边距
  threshold: 0.1, // 元素至少有10%可见时触发回调
}
const observeTargetList = showIndex?.map(({ meter }) => meter);

const Chart = () => {

  const lazyRequest = useIntersectionObserver(observeOptions, observeTargetList);

  return (
    <PageContainer
      ghost
      header={{
        title: '折线图',
        breadcrumb: {},
      }}
    >
      <Row wrap gutter={[0, 16]}>
        {
          showIndex?.map(({ title, meter }) => {
            const showLazy = lazyRequest?.find(it => it.targetId === `chart_${meter}`)?.isIntersecting;
            return (
              <Col
                key={meter}
                id={`chart_${meter}`}
                span={24}
                className={styles['chartBox']}
              >
                <TargetLog
                  title={title}
                  meter={meter}
                  showLazy={showLazy}
                />
              </Col>
            )
          })
        }
      </Row>
    </PageContainer>
  )
}

export default Chart